<template>
	<view class="page"  >
		<view class="loginbox">
			<view class="tip" @click="tourl('/pages/my/privacyAgreement?type=3')">
				<text>积分规则</text>
				<u-icon  name="question-circle" size="16" color="#999999" style="margin-left: 15rpx;"></u-icon>
			</view>
			<view class="content">
				<image src="@/static/jinbi.png" mode="widthFix"></image> 我的积分
			</view>
			<view class="title">{{info.point || 0}}</view>
			
			<view class="btn">
				
				<view class="btn-img" @click="changeMoney"  >
					兑换余额
				</view>
				<view class="btn-img" @click="handleStore" style="background-color: #fff;color:#277EEF;">
					积分商城
				</view>
			</view> 
			
		</view>
		
		<view style="background-color: #F8F8F8;height: 20rpx;"></view>
		
		<view class="tabbox">
			<view v-for="(item,i) in toplist" :key="i" class="tab" @click="topChange(item.id)">		
				<view :class="topSign==item.id ? 'active' : ''">
					{{item.name}}
				</view>
				<view :class="topSign==item.id ? 'underline' : ''"></view>
			</view>
		</view>
		
		
		<integral-list :value="list"></integral-list>
		
		<integral-to-money @handleChange='getdata' :point="info.point" ref="integralToMoney"/> 
	</view>
	
</template>

<script>
	import integralList from "../components/integral-list.vue"
	import integralToMoney from "../components/integralToMoney.vue"
	import { userInfoAPI,pointListAPI,recordListAPI} from "@/api/user.js"
	import pageing from "@/mixins/pageing.js"
	export default {
		mixins:[pageing],
		components:{
			integralList,integralToMoney
		},
		data() {
			return {
				toplist:[
					{id:1,name:"积分记录"},{id:2,name:"兑换记录"} 
				],
				topSign:1,
				list:[],				 
				info:{
					point:''
				}
			};
		},
		created() {
			this.getdata()
			this.getlist()
		},
		methods:{
			getlist(){
				var action=this.topSign==1?recordListAPI:pointListAPI
				action({
					"pageNo": this.pageNo,
					"pageSize":  this.pageSize  
				}).then(res=>{
					this.total=res.total
					this.list=this.list.concat(res.list) 
				})
			},
			topChange(n){
				this.topSign=n
				this.pageNo=1
				this.list=[]
				this.getlist()
			},
			getdata() {
				userInfoAPI().then(res => {
					this.info = res
				})
			},
			 
			handleStore(){
				 uni.showModal({
				 	title:"暂未开通",
				 	content:"积分商城火热筹备中，敬请期待！",
				 	showCancel:false,
				 	confirmText:"我已了解"
				 })	
			},
			changeMoney(){
				this.$refs.integralToMoney.visible=true
			}
			
			
		}
		
	}
</script>

<style lang="scss" scoped>
 
.loginbox{
	  
	background-color: #fff;
	padding:20rpx 30rpx;
	.title{
	 
		line-height: 80rpx;
		font-weight: bold;
		font-size: 35rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 35rpx;
			height: 35rpx;
		}
	}
	.tip{
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		justify-content:flex-end;
		text{
			margin-right: 5rpx;
			font-size: 28rpx;
			color: #999999;
		}
		image{
			width: 32rpx;
			height: 32rpx;
		}
	}
	.content{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0 20rpx;
		font-size: 28rpx;
		color: #333333;
		image{
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}
	.btn{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.btn-img{
			width: 250rpx;
			height: 80rpx;
			border-radius: 50rpx;
			background-color: #277EEF;
			border: 1rpx solid #277EEF;
			line-height: 80rpx;
			color: #fff;
			text-align: center;			 
			margin: 40rpx auto 20rpx;
			
		}
	}
	
	
}

.tabbox{
	 
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding:0 30rpx;
	background-color: #fff;
	z-index: 99;
	// height: 100rpx;
	border-bottom: 1px solid #eef0f4;
	width: 100%;
	.tab{
		padding: 20rpx;
		position: relative;
		 
		line-height: 40rpx;
		color: #666;
		text-align: center;
		 
	}
	.active{
		font-weight: bold;
		color: #333;
		font-size: 35rpx;
		
	}
	.underline{
		position: absolute;
		bottom: 0;
		left:  30%;
		width:40%;
		height: 6rpx;
		// background:$uni-color-primary;
		border-radius: 1px;
		background: $uni-color-primary;
	}
	
}


</style>